<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>

<body>
<!--
AngularJS 指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。----作用域
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
-->
<!--
	<p>总价： <span ng-bind="quantity * cost"></span></p>同
<p>总价： {{ quantity * cost }}</p>
-->

<body ng-app="myApp">
<!--
	使用 .directive 函数来添加自定义的指令。
	使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
	自定义指令4种调用方式： 
		元素名：<runoob-directive></runoob-directive>  
		属性：<div runoob-directive></div>
		类名：<div class="runoob-directive"></div>
		 注释：<!-- directive: runoob-directive -->


<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
    	/*
    	 restrict 值可以是以下几种:
		    E 只限元素名使用
		    A 只限属性使用
		    C 只限类名使用
		    M 只限注释使用
			restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
    	*/
    	 restrict : "EA",
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
<!--注释调用需知-->
<p><strong>注意：</strong> 我们需要在该实例添加 <strong>replace</strong> 属性， 否则评论是不可见的。</p>
<p><strong>注意：</strong> 你必须设置 <b>restrict</b> 的值为 "M" 才能通过注释来调用指令。</p>

<!-------------------------------------------------------
<form name="myForm1">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm1.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
<p>在输入框中输入你的游戏地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>
<!-------------------------------------------------------------->
<div ng-app="myModel" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myModel', []); 
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>
<p>使用 ng-model 指令来绑定输入域的值到控制器的属性。</p>
<!-------------------------------->
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
</form>
<!------------------------------------------->
<!--  状态样式  ：ng-model 指令根据表单域的状态添加/移除以下类：
    ng-empty
    ng-not-empty
    ng-touched
    ng-untouched
    ng-valid
    ng-invalid
    ng-dirty
    ng-pending
    ng-pristine
-->
#inp.ng-invalid {
    background-color: lightblue;
}
<form ng-app="" name="myForm">
    输入你的名字:
    <input id="inp" name="myName" ng-model="myText" required>
</form>

<p>编辑文本域，不同状态背景颜色会发送变化。</p>
<p>文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。</p>
</body>

</body>
</html>
